<template>
	<view class="notice-container">

		<view class="title">消息通知</view>
		<view class="notice-container__content flex u-padding-20">
			<view class="u-margin-top-20 u-margin-right-10">
				<u-image width="80rpx" height="80rpx" :src="src"></u-image>
			</view>
			<swiper class="notice-container__swiper flex-1 u-padding-20" :autoplay="true" :interval="2000"
				:circular="true" :duration="1000" :vertical="true">
				<swiper-item v-for="(item,i) in list" :key="i">
					<view @click="goNotice()">
						<view class="u-line-1 u-m-b-10 fontBlack">
							{{item.title}}
						</view>
						<view class="u-font-12 u-line-1">
							{{item.content}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				src: 'http://118.31.238.190/home/icon_notice.png',
				list: [

				]
			}
		},
		mounted() {
			this.getNoticeData();
		},

		methods: {
			getNoticeData() {
				const _that = this;
				this.$zx.common_api.getNoticeList("1", "10").then((data) => {
					console.log("data=" + JSON.stringify(data))
					if (data.length == 0) {
						this.list.push("暂无公告");
					} else {
						this.list = data;
						// data.forEach(function(item, index, array) {
						// 	_that.list.push(item.title + "\n" + item.content);

						// });
					}




				});
			},
			goNotice() {
				this.$u.route('pages/staff-home/noticeList')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.notice-container {
		background-color: white;
		padding-bottom: 10rpx;

		&__content {
			margin: 20rpx 20rpx;
			border-radius: 20rpx;
			border: 1rpx solid #e5e5e5;
		}

		&__swiper {
			height: 90rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;
		}
	}

	.title {
		font-weight: bold;
		margin-top: 20rpx;
		background: white;
		padding: 20rpx 0 0 20rpx;
	}
</style>